<template>
  <div class="echarts-chat-example">
    <h2>Echarts图表聊天示例</h2>

    <div class="layout-container">
      <div class="chat-container">
        <SimpleChat
          :apiKey="apiKey"
          :apiBase="apiBase"
          :inputs="inputs"
          @message-end="handleMessageEnd"
          @json-extracted="handleJsonExtracted"
          :welcomeMessage="welcomeMessage"
        />
      </div>

      <div class="data-container">
        <div class="instruction-container">
          <h3>使用说明</h3>
          <p>尝试输入以下消息来测试echarts图表渲染功能：</p>
          <div class="message-template" @click="insertTemplate(0)">
            <p><strong>基础折线图</strong></p>
            <p>请生成一个基础折线图，展示最近七天的电费数据</p>
          </div>
          <div class="message-template" @click="insertTemplate(1)">
            <p><strong>柱状图</strong></p>
            <p>请生成一个柱状图，对比不同用电类型的电量</p>
          </div>
          <div class="message-template" @click="insertTemplate(2)">
            <p><strong>饼图</strong></p>
            <p>请生成一个饼图，展示各种类型用户的比例</p>
          </div>
          <div class="message-template" @click="insertTemplate(3)">
            <p><strong>复杂组合图表</strong></p>
            <p>请生成一个包含柱状图和折线图的组合图表，显示用电量和费用的关系</p>
          </div>
        </div>
      </div>
    </div>

    <div class="echarts-example">
      <h3>Echarts配置示例</h3>
      <pre class="code-box">
```echarts
{
  "title": {
    "text": "电费数据统计"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": ["电量", "电费"]
  },
  "xAxis": {
    "type": "category",
    "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  },
  "yAxis": [
    {
      "type": "value",
      "name": "电量(kWh)"
    },
    {
      "type": "value",
      "name": "电费(元)"
    }
  ],
  "series": [
    {
      "name": "电量",
      "type": "bar",
      "data": [120, 132, 101, 134, 90, 230, 210]
    },
    {
      "name": "电费",
      "type": "line",
      "yAxisIndex": 1,
      "data": [220, 182, 191, 234, 290, 330, 310]
    }
  ]
}
```</pre
      >
      <div class="tip">
        <p>可以复制上面的代码块用于测试，要求AI助手生成类似的图表</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { SimpleChat } from '@/components/IntelligentChat'
import { DIFY_API_V1_URL, DIFY_API_KEY } from '@/constants/dify'

// 使用常量替换硬编码的URL
const apiKey = DIFY_API_KEY
const apiBase = DIFY_API_V1_URL

// 欢迎消息
const welcomeMessage =
  '你好！我是支持Echarts图表的聊天助手。我可以生成各种数据可视化图表，请尝试让我生成不同类型的图表。'

// 可选的输入参数示例
const inputs = ref({
  // 示例自定义参数
  // context: '这是一些上下文信息'
})

// 存储最近一次会话结果
const lastResult = ref(null)

// 存储提取的JSON数据
const extractedJson = ref(null)

// 处理会话结束事件
const handleMessageEnd = (result) => {
  console.log('聊天会话结束，收到结果:', result)

  // 保存结果到组件状态
  lastResult.value = {
    message: result.message,
    response: result.response
  }
}

// 处理提取到的JSON数据
const handleJsonExtracted = (jsonData) => {
  console.log('提取到JSON数据:', jsonData)
  extractedJson.value = jsonData
}

// 模板消息
const templates = [
  '请生成一个基础折线图，展示最近七天的电费数据',
  '请生成一个柱状图，对比不同用电类型的电量',
  '请生成一个饼图，展示各种类型用户的比例',
  '请生成一个包含柱状图和折线图的组合图表，显示用电量和费用的关系'
]

// 插入模板消息到聊天
const insertTemplate = (index) => {
  if (index >= 0 && index < templates.length) {
    // 这里可以直接设置输入框的值，但由于SimpleChat没有暴露这个功能，
    // 所以我们只能复制到剪贴板
    navigator.clipboard
      .writeText(templates[index])
      .then(() => {
        alert('已复制到剪贴板，请粘贴到输入框')
      })
      .catch((err) => {
        console.error('复制失败:', err)
        alert('复制失败，请手动输入')
      })
  }
}
</script>

<style scoped>
.echarts-chat-example {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.layout-container {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.chat-container {
  flex: 1;
  height: 600px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.data-container {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.instruction-container {
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.message-template {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.message-template:hover {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.message-template p {
  margin: 5px 0;
}

.echarts-example {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin-top: 20px;
}

.code-box {
  padding: 15px;
  background-color: #2b2b2b;
  color: #f8f8f2;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.4;
}

.tip {
  margin-top: 10px;
  padding: 10px;
  background-color: #e6f7ff;
  border-left: 4px solid #1890ff;
  border-radius: 0 4px 4px 0;
}
</style>
